import React from 'react'
import { Button, Icon, Input, Table, Tag,Tooltip } from 'antd'
import Highlighter from 'react-highlight-words'

import _ from 'lodash'
import { FormattedMessage } from 'react-intl'
import { convertContent } from '../../../../../constant/lang-util'

export default class ProgramAssignmentsBox extends React.Component {
  state={
    searchText:''
  }
  getColumns = myStudentAssignments =>{
    const columns = [{
      title: <FormattedMessage id='姓名'/>,
      dataIndex: 'name',
      width:50,
      key: 'name'
    },{
      title: 'Tag',
      dataIndex:'tag',
      width:80,
      ...this.getColumnSearchProps('tag'),
      sorter: (a,b)=> a-b<0,
      render: (item) => {
        return <span>{this.formatTags(item)}</span>
      }
    }]
    const grouped = _.groupBy(myStudentAssignments, item => item['主题'])
    Object.keys(grouped).forEach(item => columns.push({title:
      <a onClick={()=>this.props.onChangeTopic(item)}>{item}</a>,
      dataIndex:item,
      width:200,
      key:item}))
    return columns
  }
  getColumnSearchProps = dataIndex => ({
    filterDropdown: ({setSelectedKeys, selectedKeys, confirm, clearFilters}) => (
      <div style={{padding: 8}}>
        <Input
          ref={node => {
            this.searchInput = node
          }}
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
          style={{width: 188, marginBottom: 8, display: 'block'}}
        />
        <Button
          type="primary"
          onClick={() => this.handleSearch(selectedKeys, confirm)}
          icon="search"
          size="small"
          style={{width: 90, marginRight: 8}}
        >
          Search
        </Button>
        <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{width: 90}}>
          Reset
        </Button>
      </div>
    ),
    filterIcon: filtered => (
      <Icon type="search" style={{color: '#1890ff'}}/>
    ),
    onFilter: (value, record) =>
      (record[dataIndex]||'')
        .toString()
        .toLowerCase()
        .includes(value.toLowerCase()),
    onFilterDropdownVisibleChange: visible => {
      if (visible) {
        setTimeout(() => this.searchInput.select())
      }
    },
    render: text => (
      <Highlighter
        highlightStyle={{backgroundColor: '#ffc069', padding: 0}}
        searchWords={[this.state.searchText]}
        autoEscape
        textToHighlight={text.toString()}
      />
    ),
  })

  handleSearch = (selectedKeys, confirm) => {
    confirm()
    this.setState({searchText: selectedKeys[0]})
  }

  handleReset = clearFilters => {
    clearFilters()
    this.setState({searchText: ''})
  }

  formatTags = (item) => {
    if(!item) return ''

    const tagColors = item.split(',')

    return tagColors.map((item,index) => {
      const tagColor = item.split('|')
      return <Tag color={tagColor[1]} key={index}>{tagColor[0]}</Tag>
    })
  }
  getData = myStudentAssignments => {
    let result = []
    const groupedNames = _.groupBy(myStudentAssignments, item => item['name'])
    Object.keys(groupedNames).forEach(name => {
      let temp = {name,tag:groupedNames[name][0].tag}
      const groupedTopics = _.groupBy(groupedNames[name], item => item['主题'])
      Object.keys(groupedTopics).forEach(topic => {
        temp[topic] = this.statisticStatus(groupedTopics[topic])
      })
      result.push(temp)
    })
    return result
  }

  statisticStatus = taskAssignments =>{
    let result = {已完成:0,未完成:0,已提交:0,未提交:0,已评阅:0}
    taskAssignments.forEach(item =>{
      if (item['已评阅']) {
        result['已评阅'] += 1
      }
      result[item['分数']] = result[item['分数']] + 1
    })
    return  <Tooltip title={convertContent('总数|未提交-已提交-未完成-已完成-已评阅')}>
    {taskAssignments.length} | {result['未提交']}-
    <font color='#eec130'>{result['已提交']}</font>-
    <font color='red'>{result['未完成']}</font>-
    <font color='#4281f5'>{result['已完成']}</font>-
    <font color='#9042f5'>{result['已评阅']}</font>
    </Tooltip>
  }
  render () {
    const {myStudentAssignments} = this.props
    const columns = this.getColumns(myStudentAssignments)
    const data = this.getData(myStudentAssignments)

    return <Table columns={columns}
                  dataSource={data}
                  pagination={false}
                  bordered
                  size='small'
            />
  }
}
